<script setup lang="ts">
import { ref } from 'vue';
import { AddCircleIcon, MinusCircleIcon } from 'tdesign-icons-vue-next';
import Panel from './Panel.vue';
import { useDictList } from '@/soar';
import LgDict from '@/soar/components/LgDict/index.vue';
import UserSinglePicker from '@/pages/system/auth/user/Picker/SinglePicker.vue';
import UserMultiplePicker from '@/pages/system/auth/user/Picker/MultiplePicker.vue';
import PostMultiplePicker from '@/pages/system/auth/post/Picker/MultiplePicker.vue';
import RoleSinglePicker from '@/pages/system/auth/role/Picker/SinglePicker.vue';
import LgBizSelect from '@/soar/components/LgBizSelect/index.vue';
import postTagApi from '@/pages/system/auth/postTag/api';
import NodeListenerTable from '@/components/flow/NodeListenerTable.vue';
import NodeButtons from '@/components/flow/NodeButtons.vue';
import FieldPermits from '@/components/flow/FieldPermits.vue';
import ProcessListenerTable from '@/components/flow/ProcessListenerTable.vue';
import { findPredecessorApprovals, mergeButtonPermit, mergeFieldPermit } from '@/components/flow/utils';

const nodes = ref([]);
const model = ref({
  assignees: [],
} as any);
const visible = ref(false);
defineExpose({
  open(data: any, flow: any) {
    data.fieldPermits = mergeFieldPermit(flow.fields, data.fieldPermits || [], 1);
    data.buttonPermits = mergeButtonPermit(flow.buttons, data.buttonPermits || []);
    model.value = data;
    nodes.value = findPredecessorApprovals(data.key, flow.nodes) || [];
    visible.value = true;
  },
});

const { ApproverTypeEnum } = useDictList('ApproverTypeEnum');

function close() {
  const strs = [];
  for (const x of model.value.assignees) {
    switch (x.type) {
      case 10:
        strs.push(x.labels?.join('、'));
        break;
      case 11:
        strs.push(x.labels?.join('、'));
        break;
      case 12:
      case 52:
      case 62:
        strs.push(x.label);
        break;
      default:
        const d = ApproverTypeEnum.value.find((y) => y.value === x.type);
        if (d) {
          strs.push(d.label);
        }
        break;
    }
  }
  model.value.description = strs.join('；');
}
</script>

<template>
  <panel v-model:visible="visible" width="800px" @close="close">
    <template #header>
      <t-input v-model="model.name" />
    </template>
    <t-form label-align="top" class="gl-h100">
      <t-tabs default-value="1" class="gl-h100 gl-tabs-auto-h gl-tabs-space">
        <t-tab-panel label="审批配置" value="1">
          <t-form-item label="节点类型" name="instanceType">
            <lg-dict v-model="model.instanceType" code="NodeTypeEnum" component="t-radio-group" />
          </t-form-item>
          <t-form-item v-if="model.instanceType === 1" label="会签通过比例" name="ratio">
            <t-input-number v-model="model.ratio" />
          </t-form-item>
          <t-form-item label="审批人" name="approvers">
            <table class="gl-table">
              <tr>
                <th style="width: 150px">类型</th>
                <th>参数</th>
                <th style="width: 50px">
                  <a class="gl-hover" @click="model.assignees.push({ type: 10 })">
                    <add-circle-icon style="color: var(--app-color-primary)" size="22" />
                  </a>
                </th>
              </tr>
              <tr v-for="(x, i) in model.assignees" :key="x.type">
                <td>
                  <t-select v-model="x.type" :options="ApproverTypeEnum" />
                </td>
                <td>
                  <user-multiple-picker v-if="x.type === 10" v-model="x.ids" input @label-change="x.labels = $event" />
                  <post-multiple-picker
                    v-else-if="x.type === 11"
                    v-model="x.ids"
                    input
                    @label-change="x.labels = $event"
                  />
                  <role-single-picker
                    v-else-if="[12, 62].includes(x.type)"
                    v-model="x.longValue"
                    input
                    @label-change="x.label = $event"
                  />
                  <t-input v-else-if="[20, 21].includes(x.type)" v-model="x.strValue" placeholder="字段" />
                  <template v-else-if="x.type === 51">
                    <t-input-number v-model="x.intValue" :min="1" placeholder="向上层级" />
                    <lg-biz-select
                      v-model="x.strValue"
                      :data="postTagApi.query"
                      value-field="code"
                      label-field="name"
                      placeholder="岗位标签"
                    />
                  </template>
                  <template v-else-if="x.type === 52">
                    <t-input-number v-model="x.intValue" :min="1" placeholder="向上层级" />
                    <role-single-picker v-model="x.longValue" input @label-change="x.label = $event" />
                  </template>
                  <lg-biz-select
                    v-else-if="x.type === 61"
                    v-model="x.strValue"
                    :data="postTagApi.query"
                    value-field="code"
                    label-field="name"
                    placeholder="岗位标签"
                  />
                  <t-input-number v-else v-model="x.intValue" :min="1" placeholder="最多可选数量" />
                </td>
                <td>
                  <a class="gl-hover" @click="model.assignees.splice(i, 1)">
                    <minus-circle-icon style="color: var(--app-color-primary)" size="20" />
                  </a>
                </td>
              </tr>
            </table>
          </t-form-item>
          <t-form-item label="审批人为空时" name="missingAssignee">
            <lg-dict v-model="model.missingAssignee" code="ApproverMissingEnum" component="t-radio-group" />
          </t-form-item>
          <t-form-item v-if="model.missingAssignee === 3" label="默认审批人" name="defaultAssignee">
            <user-single-picker v-model="model.defaultAssignee" input />
          </t-form-item>
          <t-form-item label="审批不通过时" name="backType">
            <lg-dict v-model="model.backType" code="RejectTaskEnum" component="t-radio-group" />
          </t-form-item>
          <t-form-item v-if="model.backType === 3" label="退回指定节点" name="backNode">
            <t-select v-model="model.backNode">
              <t-option v-for="x in nodes" :key="x.key" :value="x.key" :label="x.name" />
            </t-select>
          </t-form-item>
        </t-tab-panel>
        <t-tab-panel label="字段权限" value="field">
          <field-permits :data="model.fieldPermits" />
        </t-tab-panel>
        <t-tab-panel label="按钮权限" value="button">
          <node-buttons :data="model.buttonPermits" />
        </t-tab-panel>
        <t-tab-panel label="节点监听器" value="nodeListener">
          <node-listener-table :data="model.nodeListeners" />
        </t-tab-panel>
        <t-tab-panel label="执行监听器" value="processListener">
          <process-listener-table :data="model.processListeners" />
        </t-tab-panel>
      </t-tabs>
    </t-form>
  </panel>
</template>

<style scoped lang="less"></style>
